<template>
	<view class="top" v-if="goods.length!==0">
		<my-address></my-address>
		<view class="cart_title">
			<uni-icons type="shop" size="18"></uni-icons>
			<text>购物车</text>
		</view>
		<!--  循环渲染购物车中方的商品数据-->
		<uni-swipe-action>
			<block v-for="(item,index) in goods" :key="item.goods_id">
			<uni-swipe-action-item :right-options="options" @click="swipeaction(item)"  @change="change">
				<my-goodslist :good='item' :showRadio="true" @radiochange='radiochange' :showNum="true" @numderChange='numderChange'></my-goodslist>
			</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<!-- 结算组件 -->
		<my-settle></my-settle>
	</view>
	<!-- 购物车没有商品时显示 -->
	<view class="empty_box" v-else>
		<image src="/static/tab_icons/cart.png" class="img"></image>
		<text>空空如也~</text>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {mapState} from 'vuex'
	export default {
		mixins:[badgeMix],
		computed:{
			...mapState({goods:(state)=>state.cart.cartList})
		},
		data() {
			return {
				options:[
					{
						text:'删除',
						style:{
							backgroundColor:'#c00000'
						}
					}
				]
			}
		},
		onLoad() {
			// console.log(this.goods)
		},
		methods:{
			// 自定义事件，修改选中状态
			radiochange(cart){
				this.$store.commit('UPGOODSSTATE',cart)
			},
			// numderbox组件自定义事件，
			numderChange(cart){
				this.$store.commit('UPGOODCOUNT',cart)
			},
			// 删除商品
			swipeaction(goods){
				console.log(goods)
				this.$store.commit('REMOVEGOODS',goods.goods_id)
			},
			change(){
				
			}
		}
	}
</script>

<style lang="scss">
.cart_title{
	height: 40px;
	display: flex;
	align-items: center;
	font-size: 14px;
	border-bottom: 1px solid #efefef;
	text{
		margin-left: 10px;
	}
}
.top{
	padding-bottom:50px ;
}
.empty_box{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 150px;
	.img{
		width: 90px;
		height: 90px;
	}
	text{
		font-size: 12px;
		color:gray;
		margin-top: 10px;
		
	}
}
</style>
